<link rel="stylesheet" href="/assets/assets(home)/css/coupon_info.css">
<title>详情</title>


<!-- <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">优惠券</h1>
</header> -->

<div class="coupon_cover">
    <img src="{$coupon.thumb_text}" />
</div>

<div class="coupon_detail">
    <div class="coupon_info">
        <div class="left">
            <div class="left_top">
                <div>
                    <span>{$coupon.rate * 100}</span>折
                </div>
                <div class="top_info">
                    <div>{$coupon.title}</div>
                    <div>COUPON</div>
                </div>
            </div>
            <div class="left_tips">凭此券购买课程可减免<span>{$coupon.rate * 100}</span>%</div>
        </div>
        <div class="receive">
            {if condition="$coupon.receive"}
            <a href="{:url('home/coupon/receive', ['cid' => $coupon['id']])}" class="mui-btn mui-btn-danger">待领取</a>
            {else /}
            <a class="mui-btn receive_btn">已领取</a>
            {/if}
        </div>
    </div>
    <div class="coupon_prompt">
        <div class="prompt_title">温馨提示：</div>
        <div><span>•</span>每人限领1张</div>
        <div><span>•</span>仅限量{$coupon.total}张，赶快领取！</div>
        <div><span>•</span>领取后{$coupon.createtime_text}至{$coupon.endtime_text}有效</div>
    </div>
</div>

<h1>显示某某某领取优惠卷</h1>

<script>
    //修改浏览器自带的后退按钮
    window.history.pushState(null, null, ``);

    window.addEventListener('popstate', function (e) {
        e.preventDefault()
        location.href = `{:url('home/coupon/coupon_list')}`
    }, false)
</script>